<!-- 帐号与安全 -->
<template>
  <view>
    <aster-back
      font-color="#333"
      :show-title="true"
      title="帐号安全"
      :is-back="false"
      @back="
        () => {
          router.replace(config.route.setting);
        }
      "
    />
    <view class="border-radius margin-top-sm margin-bottom-sm">
      <aster-list-title
        title="绑定手机"
        iconfont=""
        :tip="userInfo?.username"
        @goto="to_mobile()"
      />
      <aster-list-title title="登录密码" iconfont="" tip="修改" @goto="to_forget()" />
      <aster-list-title title="实名认证" iconfont="" :tip="isAuth" @goto="to_auth()" />
      <aster-list-title
        title="帐号注销"
        iconfont=""
        tip="账号注销后不能恢复,请谨慎操作"
        @goto="to_logoff()"
      />
    </view>
    <view class="title">帐号绑定</view>
    <view class="border-radius margin-top-xs">
      <aster-list-title title="支付宝" iconfont="" :tip="zfb" />
      <aster-list-title title="微信" iconfont="" :tip="wx" />
      <aster-list-title title="QQ" iconfont="" :tip="qq" />
      <aster-list-title title="微博" iconfont="" :tip="wb" />
    </view>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import AsterListTitle from '@/components/common/aster-list-title.vue';
  import { getSensitiveData } from '@/services/api/user/user';
  import { SensitiveDataModel } from '@/services/model/userModel';
  import config from '@/utils/config';
  import { isEmpty } from '@/utils/is';
  import { router } from '@/utils/router';
  import { Modal } from '@/utils/uniapi/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { computed, ref } from 'vue';

  const userInfo = ref<SensitiveDataModel>();

  onLoad(() => {
    getSensitiveData().then(({ data }) => {
      userInfo.value = data.data;
    });
  });

  /** 是否实名认证 */
  const isAuth = computed(() => {
    if (isEmpty(userInfo.value?.idcard)) {
      return '未认证';
    } else {
      return '已认证';
    }
  });
  // 帐号绑定
  const zfb = computed(() => {
    if (isEmpty(userInfo.value?.zfb_account)) {
      return '未绑定';
    } else {
      return '已绑定';
    }
  });
  const wx = computed(() => {
    if (isEmpty(userInfo.value?.wx_account)) {
      return '未绑定';
    } else {
      return '已绑定';
    }
  });
  const qq = computed(() => {
    if (isEmpty(userInfo.value?.qq_account)) {
      return '未绑定';
    } else {
      return '已绑定';
    }
  });
  const wb = computed(() => {
    if (isEmpty(userInfo.value?.wb_account)) {
      return '未绑定';
    } else {
      return '已绑定';
    }
  });

  const to_mobile = () => {
    router.push(config.route.security_mobile + '?mobile=' + userInfo.value?.username);
  };
  const to_forget = () => {
    router.push(config.route.login_forget);
  };
  const to_auth = () => {
    router.push(config.route.authentication);
  };
  const to_logoff = () => {
    Modal({
      title: '提示',
      content:
        '1、账号注销后将不能恢复 \n 2、帐号内平台资产及虚拟权益将一同注销（包括但不限于红包、优惠券、卡券、积分等） \n 3、帐号的个人资料及历史信息将被清空。',
      confirmText: '我确定注销帐号',
      confirmColor: '#8B0000',
    }).then((data: any) => {
      if (data.confirm) {
        // 注销帐号
        console.log(data);
      }
    });
  };
</script>
<style lang="scss" scoped>
  page {
    padding: 0 20rpx;
  }

  .title {
    font-size: 32rpx;
    font-weight: bold;
    padding: 0 20rpx;
  }
</style>
